import React from 'react';
import { Layout } from 'antd';

import { connect } from 'dva';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';

import Header from './Header';
import SiderMenu from '@/components/SiderMenu';

import Context from './MenuContext';

import { MyLayout, MyContent, BaseLayout } from './styled';
import styles from './styles.less';


export interface IMenu {
  name: string;
  id: number;
  url?: string;
  children?: Array<IMenu>;
}

export interface IProps {
  dispatch?: Function;
  menu?: Array<IMenu>;
  location: any;
  history?: {
    push: Function;
  }
}

export interface IState {
  collapsed: boolean,
}

const query = {
  'screen-xs': {
    maxWidth: 575,
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767,
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991,
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199,
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599,
  },
  'screen-xxl': {
    minWidth: 1600,
  },
};

@connect(({ menu, global }) => ({
  menu: menu.menuData,
  collapsed: global.collapsed,
  defaultMenu: menu.defaultMenu
}))
class BasicLayout extends React.Component<IProps, IState> {

  readonly state: IState = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    this.setState({ collapsed });
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'menu/queryMenu'
    }).then(() => {
      sessionStorage.setItem('menuIndex', 'true');
    })
  }

  getContext() {
    const { location } = this.props;
    return {
      location,
    };
  }

  render() {
    const { menu = [], children, location } = this.props;

    const loc = /^\/data\/analyse\_check\/(\d+)\/details$/;
    const home = /^\/home$/;
    const risk = /^\/data\/analyse_risk$/
    const alarm = /^\/data\/analyse_alarm$/
    const isReport = (loc.test(location.pathname));
    const isHome = (home.test(location.pathname));
    const isRisk = (risk.test(location.pathname))
    const isAlarm = (alarm.test(location.pathname))

    const layout = (
      <Layout style={{ minHeight: '100vh' }} >
        <BaseLayout>
          <SiderMenu menu={menu} />
          <MyLayout>
            <Header />
            <MyContent color='#F0F3FA'>
              <MyContent
                color={isHome || isRisk || isAlarm|| isReport ? '#F0F3FA' : '#fff'}
                padding={'0'}
                style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
                className={styles.container}
              >
                {children}
              </MyContent>
            </MyContent>
          </MyLayout>
        </BaseLayout>
      </Layout>
    )

    return (
      <React.Fragment>
        <ContainerQuery query={query}>
          {params => (
            <Context.Provider value={this.getContext()}>
              <div className={classNames(params)}>{layout}</div>
            </Context.Provider>
          )}
        </ContainerQuery>
      </React.Fragment>
    );
  }
}

export default BasicLayout;
